.telaPrincipal{
    background-color: #232429;
}
.but02{
  background: -webkit-linear-gradient(left, #22c83e, #82e112);
  width: 98px;
  padding: 9px;
  color: black;
}
.but01{
  background: -webkit-linear-gradient(left, #22c83e, #82e112);
  padding: 9px;
  width: 98px;
  text-align: center;
  margin-right: 19px;
}
.but04 span{
  width: 98px;
  color: var(--quaternary_txt_color);
}
.but03{
  background: -webkit-linear-gradient(left, #22c83e, #82e112);
}
.textPrincipal{
  text-align: center;
  color:-webkit-linear-gradient(left, #22c83e, #82e112);
}

.modalPrincipal{
  background-color: #383d4382;
}

label{
  color: #ffff;
}

.link01{
  text-decoration: none;
  color:#fff;
}
  
.link01:hover{
  color: #c9f73c;
}
p{
  color: #fff;
}
  .modalmenor{
    background-color: #36373c;
  }
a{
  text-decoration: none;
}
.dropdown-menu .dropdown-item:hover {
  background-color: transparent; 
  color: #fff; 
}

    .baralho01{
        background-color: blueviolet;
        height: 318px;
    }
    .baralho02{
        background-color: black;
        height: 318px;
    }
    .baralho03{
        background-color: blue;
        height: 318px;
    }


    body {
      font-family: Arial, sans-serif;
    }

    table {
      width: 80%;
      margin: 20px auto;
      border-collapse: collapse;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    th, td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    th {
      background-color: #f2f2f2;
    }

    tr:hover {
      background-color: #f5f5f5;
    }

    caption {
      font-size: 1.5em;
      margin-bottom: 10px;
    }

    @media (max-width: 675px) {
      .campologin{
      
        width: 171px;
      }
      
      }

       /* Estilos padrão */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 83px;
}

.navbar-brand {
  font-size: 1.5rem;
}

.btn {
  margin-right: 10px; /* Espaçamento entre os botões */
}

/* Media queries para ajustar estilos em telas menores */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column; /* Empilhar os itens verticalmente em telas menores */
    height: auto; /* Ajuste a altura automática para acomodar o conteúdo */
  }

  .btn {
    margin-right: 0; /* Remover o espaçamento entre os botões em telas menores */
    margin-bottom: 10px; /* Adicionar espaçamento entre os botões empilhados */
  }

  .navbar-brand {
    font-size: 1.2rem; /* Ajuste o tamanho da fonte para telas menores */
  }
}

/* Estilos padrão */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 95px;
  flex-wrap: wrap; /* Adicionando flex-wrap para permitir que os itens quebrem para a próxima linha em telas menores */
}

.navbar-brand {
  font-size: 1.5rem;
}

.btn {
  margin-right: 10px; /* Espaçamento entre os botões */
}

/* Media queries para ajustar estilos em telas menores */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column; /* Empilhar os itens verticalmente em telas menores */
    height: auto; /* Ajuste a altura automática para acomodar o conteúdo */
  }

  .btn {
    margin-right: 0; /* Remover o espaçamento entre os botões em telas menores */
    margin-bottom: 10px; /* Adicionar espaçamento entre os botões empilhados */
  }

  .navbar-brand {
    font-size: 1.2rem; /* Ajuste o tamanho da fonte para telas menores */
  }
}
@media (max-width: 416px) {
  .buttonsaldo {font-size: 63%;
    margin-top: 5px;
  }

  .logo {
    font-size: 63%;
    /* Outros estilos que você deseja aplicar à classe .logo para telas menores */
  }
  .bttDeposita{
    font-size: 63%;
    width: 63%;
  }
}

.nav {
  background-color: #36373c;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}

.nav-link {
  flex: 1;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .nav-link {
    font-size: 9px;
  }
}

@media (max-width: 400px) {
  .nav-link {
    font-size: 9px;
  }
}

.icone01{
  text-align: center; padding: 26px;
}
.icone01 img{
  width: 30px;
}

@media (max-width: 499px) {
  .icone013 {
    width: 20px;
 /* Define a largura da imagem como 100% da largura do contêiner pai */
    height: auto; /* Mantém a proporção original da imagem */
  }
  .centro{
    margin-right: 20px;
  }
}
.icone03{
  width: 100px;
  height: 65px;
    margin-top: 14px;

}
.but01 {
      /* Adicione estilos específicos para a classe but01, se necessário */
      /* padding: 10px 20px; Ajuste o preenchimento conforme necessário */
      font-size: 16px; /* Ajuste o tamanho da fonte conforme necessário */
      font-weight: bold; /* Adicione negrito, se desejado */
    }
 
.button-container {
      display: flex;
      justify-content: center;
      gap: 10px; /* Espaçamento entre os botões */
    }


    .offcanvas-body ul {
      color: #ffff;
       list-style-type: none;
           padding: 36px;
           margin-top: 40px;
   
     }
   
     .offcanvas-body ul li {
       text-align: right;
           font-size: 21px;
           margin-bottom: 30px; /* Adiciona espaçamento entre os itens da lista */
     }
       /* Adicione estilos personalizados se necessário */
       .custom-btn {
         color: white;
       }
   
       /* Remove o efeito de hover */
       .custom-btn:hover {
         background-color: transparent;
         color: white;
       }
   a{
     color: #ffff;
   }
   .central{
     background-color: #151515; width: 383px;
   }
   .buttmodal{
     border: 1px solid #fff;color: #ffff; border-radius: 20px;
   }
   .buttmodal:hover{
     border: 1px solid #fff;color: #ffff; border-radius: 20px;
   }
   .buttmodal01:hover{
     border: 1px solid #fff;color: #ffff; border-radius: 20px;
   }
   .buttmodal01{
     border: 1px solid #fff;color: #ffff; border-radius: 20px;
   }
   .segundoCentral{
     margin-top: 5rem; width: 60%;
   }




    /* Estilos padrão para segundoCentral */

/* Estilos específicos para telas pequenas */
/* @media (max-width: 767px) {
  .segundoCentral {
    margin-top: -4rem;
  width: 60%;
     
      
  }
} */
/* Estilo para o alerta */
      #myAlert {
          display: none;
          position: fixed;
          top: 10px;
          right: 10px;
          background-color: #4CAF50;
          color: white;
          padding: 15px;
          border-radius: 5px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          z-index: 1;
          animation: slideInRight 0.5s ease-out;
      }

      /* Estilo para o alerta ao ser fechado */
      #myAlert.closed {
          animation: slideOutRight 0.5s ease-out;
      }

      /* Definindo a animação de entrada */
      @keyframes slideInRight {
          from {
              transform: translateX(300px);
          }
          to {
              transform: translateX(0);
          }
      }

      /* Definindo a animação de saída */
      @keyframes slideOutRight {
          from {
              transform: translateX(0);
          }
          to {
              transform: translateX(300px);
          }
      }

      .divContainer{
        background-color: #36373c; --menu-item-width: 75px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* display: grid; */
    grid-template-columns: auto min-content auto;
    align-items: start;
    height: var(--menu-height);
    padding: 0.5em 1em;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background-color: #1d1d1d80;
    z-index: 2147483640;

      }